<template>
    <el-container class="home-container" >
        <el-header>
            <div>
              <span>个人学习空间系统</span>
            </div>

            <el-menu mode="horizontal" background-color="#545c64" text-color="#fff"
            active-text-color="#ffd04b" :router="true">
              <el-menu-item index="/Desktop" >桌面</el-menu-item>
              <el-menu-item index="/Home" >学习管理</el-menu-item>
              <el-menu-item index="/user/User">个人中心</el-menu-item>

            </el-menu>

            <!-- <div @click="music_Show">音乐播放器</div> -->

            <div>
              <el-button type="primary" round @click="music_Show1">来点音乐吧</el-button>

              <el-button type = "info" round @click="logout">退出</el-button>
            </div>
          </el-header>


        <el-main :style="bg1">
          <!-- 左右分为两块， -->
          <el-row >
            <el-col :span="4">

                <div class="flex-container">
                  <div @click="goFile">
                    <img class="tupian1" src="../assets/wenjian.jpg" />
                    <span>文件管理</span>
                  </div>
                  <div @click="goPlan">
                    <img class="tupian1" src="../assets/jihua.png" />
                    <span>学习计划</span>
                  </div>
                  <div @click="goStyle">
                    <img class="tupian1" src="../assets/fengge.jpg" />
                    <span>学习风格</span>
                  </div>

                  <div>
                    <img class="tupian1" src="../assets/kecheng.jpg" />
                    <span>课程推荐</span>
                  </div>
                  <div @click="goP_Recommend">
                    <img class="tupian1" src="../assets/huoban.jpg" />
                    <span>伙伴推荐</span>
                  </div>
                  <div @click="dialogFormVisible_jisuanqi = true">
                    <img class="tupian1" src="../assets/jisuanqi.jpg" />
                    <span>计算器</span>
                  </div>

                  <div @click="dialogFormVisible_rili = true">
                    <img class="tupian1" src="../assets/rili.jpg" />
                    <span>习惯打卡</span>
                  </div>

                   <div @click="music_Show2">
                    <img class="tupian1" src="../assets/yinyue.jpg" />
                    <span>音乐</span>
                  </div>
                  <div @click="dialogFormVisible_Wallpaper = true">
                    <img class="tupian1" src="../assets/bizhi.jpg" />
                    <span>壁纸设置</span>
                  </div>
                  <!--<div>
                    <img class="tupian1" src="../assets/rili.jpg" />
                    <span>日历</span>
                  </div> -->
                </div>

            </el-col>
            <el-col :span="16">
              <div class="grid-content">
                <div v-show="musicShow2">
                  <Player></Player>
                </div>

                <!-- 时钟组件 -->
                <AnalogClock class="clockStyle" :size="230" scaleType="roman"
                scaleColor="#fff" hourColor="#fff"
                borderWidth="8"
                />
                <!-- 音乐播放器 -->
                <div style="width:350px;" v-show="musicShow1">
                  <aplayer :music="musics[0]" :list="musics" listFolded :mini="mini" float
                  repeat='repeat-all'  mode="circulation"></aplayer>
                </div>
                <!-- 添加了脸谱图片，点击换背景图片 -->
                <div class="lianpu" v-show="liantu_Show">
                  <img class="tupian" src="../assets/lianpu.png" @click="changeSkin" >
                </div>

                <!-- 日历 -->
                <div>
                  <el-dialog title="习惯打卡" :visible.sync="dialogFormVisible_rili"  @closed="handleClose">

                        <div>
                          <div style="margin-bottom: 10px;">
                            <el-button @click="addTab(editableTabsValue)">
                              添加打卡活动
                            </el-button>
                          </div>
                          <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
                            <el-tab-pane
                              v-for="(item, index) in editableTabs"
                              :key="item.name"
                              :label="item.title"
                              :name="item.name"
                            >
                              {{item.content}}
                              <div v-if="item.name==='1' ">
                                <full-calendar :events="monthData1" class="test-fc"
                                first-day='1' locale="fr"
                                defaultView="dayGridMonth"
                                @dayClick="dayClick1"
                                >
                                </full-calendar>
                              </div>
                              <div v-else-if="item.name==='2' ">
                                <full-calendar :events="monthData2" class="test-fc"
                                  first-day='1' locale="fr"
                                  defaultView="dayGridMonth"
                                  @dayClick="dayClick2"
                                  >
                                </full-calendar>
                              </div>

                              <div v-else-if="item.name==='3' ">
                                <full-calendar :events="monthData3" class="test-fc"
                                  first-day='1' locale="fr"
                                  defaultView="dayGridMonth"
                                  @dayClick="dayClick3"
                                  >
                                </full-calendar>
                              </div>
                              <div v-else-if="item.name==='4' ">
                                <full-calendar :events="monthData4" class="test-fc"
                                  first-day='1' locale="fr"
                                  defaultView="dayGridMonth"
                                  @dayClick="dayClick4"
                                  >
                                </full-calendar>
                              </div>
                              <div v-else-if="item.name==='5' ">
                                <full-calendar :events="monthData5" class="test-fc"
                                  first-day='1' locale="fr"
                                  defaultView="dayGridMonth"
                                  @dayClick="dayClick5"
                                  >
                                </full-calendar>
                              </div>
                            </el-tab-pane>
                          </el-tabs>
                          <div>
                            <el-dialog title="添加打卡活动" :visible.sync="dialogFormVisible_daka"  @closed="handleClose_daka"append-to-body>
                                <el-form :model="eventForm"  ref="eventFormRef" label-width="150px" >
                                    <el-form-item label="新建打卡活动： "  prop="title">
                                      <el-input v-model="eventForm.title" ></el-input>
                                    </el-form-item>
                                </el-form>

                                <div slot="footer" class="dialog-footer">
                                    <el-button type="primary" @click="add_daka">确 定</el-button>
                                </div>
                            </el-dialog>
                          </div>
                        </div>
                      <div slot="footer" class="dialog-footer">
                          <el-button type="primary" @click="dialogFormVisible_rili = false">确 定</el-button>
                      </div>
                  </el-dialog>
                </div>
                <!-- 计算器弹窗 -->
                <div >
                  <el-dialog title="计算器" :visible.sync="dialogFormVisible_jisuanqi"  @closed="handleClose"
                             class="dialog_bg">

                    <div id="appji">
                      <div class="calculatorji">
                        <button @click="changeModeEvent" class="toggle-buttonji">
                          <p v-if="changeMode">基本模式     ⚆</p>
                          <p v-else>高级模式    ⚈</p>
                        </button>
                        <div class="resultsji">
                          <input class="inputji" v-model="current" />
                        </div>
                        <div class="modeji" v-if="changeMode">
                          <button class="buttonji" @click="press">7</button>
                          <button class="buttonji" @click="press">8</button>
                          <button class="buttonji" @click="press">9</button>
                          <button class="buttonji" @click="press">*</button>
                          <button class="buttonji" @click="press"><=</button>
                          <button class="buttonji" @click="press">C</button>
                          <button class="buttonji" @click="press">4</button>
                          <button class="buttonji" @click="press($event)">5</button>
                          <button class="buttonji" @click="press">6</button>
                          <button class="buttonji" @click="press">/</button>
                          <button class="buttonji" @click="press">(</button>
                          <button class="buttonji" @click="press">)</button>
                          <button class="buttonji" @click="press">1</button>
                          <button class="buttonji" @click="press">2</button>
                          <button class="buttonji" @click="press">3</button>
                          <button class="buttonji" @click="press">-</button>
                          <button class="buttonji" @click="press">x 2</button>
                          <button class="buttonji" @click="press">±</button>
                          <button class="buttonji" @click="press">0</button>
                          <button class="buttonji" @click="press">.</button>
                          <button class="buttonji" @click="press">%</button>
                          <button class="buttonji" @click="press">+</button>
                          <button class="buttonji equal-sign" @click="press">=</button>
                        </div>
                        <div class="modeji" v-else>
                          <button class="buttonji" @click="press">sin</button>
                          <button class="buttonji" @click="press">cos</button>
                          <button class="buttonji" @click="press">tan</button>
                          <button class="buttonji" @click="press">x^</button>
                          <button class="buttonji" @click="press"><=</button>
                          <button class="buttonji" @click="press">C</button>
                          <button class="buttonji" @click="press">log</button>
                          <button class="buttonji" @click="press">ln</button>
                          <button class="buttonji" @click="press">e</button>
                          <button class="buttonji" @click="press">°</button>
                          <button class="buttonji" @click="press">rad</button>
                          <button class="buttonji" @click="press">√</button>
                          <button class="buttonji" @click="press">7</button>
                          <button class="buttonji" @click="press">8   </button>
                          <button class="buttonji" @click="press">9</button>
                          <button class="buttonji" @click="press">/</button>
                          <button class="buttonji" @click="press">x 2</button>
                          <button class="buttonji" @click="press">x !</button>
                          <button class="buttonji" @click="press">4</button>
                          <button class="buttonji" @click="press">5</button>
                          <button class="buttonji" @click="press">6</button>
                          <button class="buttonji" @click="press">*</button>
                          <button class="buttonji" @click="press">(</button>
                          <button class="buttonji" @click="press">)</button>
                          <button class="buttonji" @click="press">1</button>
                          <button class="buttonji" @click="press">2</button>
                          <button class="buttonji" @click="press">3</button>
                          <button class="buttonji" @click="press">-</button>
                          <button class="buttonji" @click="press">%</button>
                          <button class="buttonji" @click="press">±</button>
                          <button class="buttonji" @click="press">0</button>
                          <button class="buttonji" @click="press">.</button>
                          <button class="buttonji" @click="press">π</button>
                          <button class="buttonji" @click="press">+</button>
                          <button class="buttonji equal-sign" @click="press">=</button>
                        </div>
                      </div>
                    </div>

                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible_jisuanqi = false">取 消</el-button>
                        <el-button type="primary" @click="dialogFormVisible_jisuanqi = false">确 定</el-button>
                    </div>
                  </el-dialog>
                </div>
                <!-- 壁纸弹窗 -->
                <div>
                  <el-dialog title="壁纸设置" :visible.sync="dialogFormVisible_Wallpaper"  @closed="handleClose"
                             width="60%" >
                    <span id="title111" >是否在桌面开启一键换肤（脸谱图片）：</span>
                    <el-switch id="switch_lianpu"
                    v-model="liantu_Show"
                    active-color="#13ce66"
                    active-text="开启"
                    inactive-text="关闭">
                    </el-switch>
                    <br><br><br>
                    <span id="title111" >单击图片可预览:</span>
                    <br><br>
                      <!-- 壁纸图片预览 -->
                    <div class="demo-image">
                      <div class="imageblock" v-for="ima in imageListurls" :key="ima" >
                        <!-- <span class="demonstration">{{ fit }}</span> -->
                        <!-- :preview-src-list="imageListurls" -->
                        <el-image
                          style="width: 180px; height: 100px"
                          :src="ima"
                          :fit="cover"
                          :preview-src-list="imageListurls"
                          ></el-image>
                        <el-button type = "info" round @click="changeIma(ima)">更换</el-button>
                      </div>
                    </div>

                      <div slot="footer" class="dialog-footer">
                          <el-button type="primary" @click="dialogFormVisible_Wallpaper = false">确 定</el-button>
                      </div>
                  </el-dialog>
                </div>

              </div>
            </el-col>
          </el-row>
        </el-main>
    </el-container>
</template>

<script>
import aplayer from 'vue-aplayer'
import {AnalogClock} from 'vue-analog-clock'
import Player from 'zw-player'
import { FullCalendar } from 'vue-fullcalendar'
import { reset } from '../router/index.js'

export default {
  components: {aplayer,AnalogClock,Player,'full-calendar': require('vue-fullcalendar')},
    data() {
      return{
        // 日历
        dialogFormVisible_daka:false,
      eventForm:{
              title:'',
      },

      editableTabsValue: '2',
      editableTabs: [{
        title: '学习',
        name: '1',
        content: '学习打卡，坚持下去，每天进步一点点！'
      }, {
        title: '运动',
        name: '2',
        content: '运动打卡，坚持下去，每天进步一点点！'
      }],
      tabIndex: 2,

      monthData1: [
              {
              title : '打卡', // 事件内容
              start : '2021-5-31', // 事件开始时间
              end : '2021-5-31',
              },
      ],
      monthData2: [
          {
          title : '打卡', // 事件内容
          start : '2021-6-1', // 事件开始时间
          end : '2021-6-1',
          },
      ],
      monthData3: [],
      monthData4: [],
      monthData5:[],
        // 计算器
        current: '',
        changeMode: true,
        // 弹窗显示
        dialogFormVisible_jisuanqi:false,
        dialogFormVisible_rili: false,
        dialogFormVisible_Wallpaper:false,
        // 显示与否
          musicShow1:false,
          musicShow2:true,
          liantu_Show:true,

          index:0,
          bg1:{
            backgroundImage: 'url('+require('../assets/yuzhou.jpeg')+')',
            backgroundRepeat: 'no-repeat',
            backgroundSize:'100% 100%',
          },
          mini:false,
          musics:  [
          {
              title:'天空之城',
              artist: '黄叶',
              url: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E.m4a',
              pic: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720200713203148.jpg',
          },
          {
              title:'蒲空英的约定',
              artist: '黄叶',
              url: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a',
              pic: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720200713203148.jpg" ,
          },
          {
              title:'无畏',
              artist: '马頔',
              url: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E9%A9%AC%E9%A0%94%20-%20%E6%97%A0%E7%95%8F.flac',
              pic: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E4%BB%A5%E5%AE%B6%E4%B9%8B%E5%90%8D.jpg', // prettier-ignore
          },
          {
              title:'蓝乐',
              artist: '白纸',
              url: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%93%9D%E4%B9%90%20-%20%E7%99%BD%E7%BA%B8.flac',
              pic: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/-1992181439.jpg" ,
          },
          ],

          // 壁纸列表
          imageListurls:[
            require('../assets/study.jpeg'),
            require('../assets/yuzhou.jpeg'),
            require('../assets/xuhua.jpeg'),
            require('../assets/qihuan.jpeg'),
            require('../assets/miao.jpeg'),
            require('../assets/life.jpeg'),
            require('../assets/sky.jpeg'),

          ]
      }
    },

    methods:{
      logout () {
        //清空token，跳转到login
        window.sessionStorage.clear()
        reset()
        this.$router.push('/login')
      },
      //点击更换背景图片
      changeSkin(){
        this.index=this.index+1;
        if(this.index ==7) this.index=0
        if(this.index==0)
        this.bg1={backgroundImage: 'url('+require('../assets/yuzhou.jpeg')+')',backgroundRepeat: 'no-repeat',backgroundSize:'100% 100%',}
        if(this.index==1)
        this.bg1={backgroundImage: 'url('+require('../assets/study.jpeg')+')',backgroundRepeat: 'no-repeat',backgroundSize:'100% 100%', }
        if(this.index==2)
        this.bg1={backgroundImage: 'url('+require('../assets/xuhua.jpeg')+')',backgroundRepeat: 'no-repeat',backgroundSize:'100% 100%',}
        if(this.index==3)
        this.bg1={backgroundImage: 'url('+require('../assets/qihuan.jpeg')+')',backgroundRepeat: 'no-repeat',backgroundSize:'100% 100%',}
        if(this.index==4)
        this.bg1={backgroundImage: 'url('+require('../assets/miao.jpeg')+')',backgroundRepeat: 'no-repeat',backgroundSize:'100% 100%',}
        if(this.index==5)
        this.bg1={backgroundImage: 'url('+require('../assets/life.jpeg')+')',backgroundRepeat: 'no-repeat',backgroundSize:'100% 100%',}
        if(this.index==6)
        this.bg1={backgroundImage: 'url('+require('../assets/sky.jpeg')+')',backgroundRepeat: 'no-repeat',backgroundSize:'100% 100%',}
      },
      // 设置中更换壁纸
      changeIma(ima){
        console.log(ima)
        console.log("sdfsdsdfsdf")
        this.bg1={backgroundImage: 'url('+ima+')',backgroundRepeat: 'no-repeat',backgroundSize:'100% 100%',}
      },
      // 日历
      // 增加打卡活动
    add_daka(){
      let newTabName = ++this.tabIndex + '';
      console.log(this.eventForm.title)
      this.editableTabs.push({
        title: this.eventForm.title,
        name: newTabName,
        content: this.eventForm.title+'打卡，坚持下去，每天进步一点点！'
      });
      this.editableTabsValue = newTabName;
      this.dialogFormVisible_daka=false
    },
    // 点击增加按钮
    addTab() {
      this.dialogFormVisible_daka=true
    },
    // 点击日期打卡
    dayClick1 (arg) {
            this.monthData1.push(
                {
                    title:"打卡",
                    start:arg,
                    end:arg,
                }
            )
    },
    dayClick2 (arg) {
        this.monthData2.push(
            {
                title:"打卡",
                start:arg,
                end:arg,
            }
        )
    },
    dayClick3 (arg) {
            this.monthData3.push(
                {
                    title:"打卡",
                    start:arg,
                    end:arg,
                }
            )
        },
        dayClick4 (arg) {
            this.monthData4.push(
                {
                    title:"打卡",
                    start:arg,
                    end:arg,
                }
            )
        },
        dayClick5 (arg) {
            this.monthData5.push(
                {
                    title:"打卡",
                    start:arg,
                    end:arg,
                }
            )
        },
        handleClose_daka(){
            this.$refs.eventFormRef.resetFields()
        },
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    },


      music_Show1(){
        this.musicShow1=!this.musicShow1
      },
      music_Show2(){
        this.musicShow2=!this.musicShow2
      },
      handleClose () {
        this.$refs.ruleForm.resetFields()
      },
      press: function (event) {
        let me = this
        let key = event.target.textContent

        if (
          key != '=' &&
          key != 'C' &&
          key != '*' &&
          key != '/' &&
          key != '√' &&
          key != "x 2" &&
          key != "%" &&
          key != "<=" &&
          key != "±" &&
          key != "sin" &&
          key != "cos" &&
          key != "tan" &&
          key != "log" &&
          key != "ln" &&
          key != "x^" &&
          key != "x !" &&
          key != "π" &&
          key != "e" &&
          key != "rad" &&
          key != "°"
        ) {
          me.current += key

        } else if (key === '=') {

          if ((me.current).indexOf('^') > -1) {
            let base = (me.current).slice(0, (me.current).indexOf('^'))
            let exponent = (me.current).slice((me.current).indexOf('^') + 1)
            me.current = eval('Math.pow(' + base + ',' + exponent + ')')
          } else {
            me.current = eval(me.current)
          }

        } else if (key === 'C') {

          me.current = ''

        } else if (key === '*') {

          me.current += '*'

        } else if (key === '/') {

          me.current += '/'

        } else if (key === '+') {

          me.current += '+'

        } else if (key === '-') {

          me.current += '-'

        } else if (key === '±') {

          if ((me.current).charAt(0) === '-') {
            me.current = (me.current).slice(1)
          } else {
            me.current = '-' + me.current
          }

        } else if (key === '<=') {

          me.current = me.current.substring(0, me.current.length - 1)

        } else if (key === '%') {

          me.current = me.current / 100

        } else if (key === 'π') {

          me.current = me.current * Math.PI

        } else if (key === 'x 2') {

          me.current = eval(me.current * me.current)

        } else if (key === '√') {

          me.current = Math.sqrt(me.current)

        } else if (key === 'sin') {

          me.current = Math.sin(me.current)

        } else if (key === 'cos') {

          me.current = Math.cos(me.current)

        } else if (key === 'tan') {

          me.current = Math.tan(me.current)

        } else if (key === 'log') {

          me.current = Math.log10(me.current)

        } else if (key === 'ln') {

          me.current = Math.log(me.current)

        } else if (key === 'x^') {

          me.current += '^'

        } else if (key === 'x !') {

          let number = 1
          if (me.current === 0) {
            me.current = '1'
          } else if (me.current < 0) {
            me.current = NaN
          } else {
            let number = 1
            for (let i = me.current; i > 0; i--) {
              number *= i
            }
            me.current = number
          }

        } else if (key === 'e') {

          me.current = Math.exp(me.current)

        } else if (key === 'rad') {

          me.current = me.current * (Math.PI / 180)

        } else if (key === '°') {

          me.current = me.current * (180 / Math.PI)

        }
    },
      changeModeEvent: function() {
        let me = this
        me.changeMode = !me.changeMode
      },
      goFile(){
        this.$router.push('/File')
      },
      goStyle(){
        this.$router.push('/Style')
      },
      goP_Recommend(){
        this.$router.push('/P_recommend')
      },
      goPlan(){
        this.$router.push('/Plan')
      }
    }
}
</script>

<style >
  @import '../assets/css/jisuanqi.css';

/* 右边布局 */
.grid-content{
  height: 820px;
}
/* 左边布局 */
.flex-container {
  height: 820px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.flex-container > div {
  width: 100px;
  margin: 10px;
  text-align: center;
  /* line-height: 100px; */
  font-size: 15px;
  color:#fff;
}

/* .flex-container > div>span{
  color:#fff
} */

.lianpu{
    width: 110px;
    height: 110px;
    position:absolute;
	  top:710px;
    left:1760px
}
.tupian{
    width: 100%;
    height: 100%;
}
.tupian1{
    width: 100%;
    border-radius: 30%;
}

.clockStyle{
  position:absolute;
	top:25px;
  left:1660px
}


.el-main{

  background-color:#eaedf1;
  margin: 0px;
  padding: 0px;
}
.dialog_bg{
    background-color: linear-gradient(to right, #85D8CE, #085078);
}

/* .home-container{
    height: 100%;
}

.el-header{
  background-color: darkslategrey;
  display:flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 30px;

} */
#title111{
  margin-bottom: 30px;
  font-size: 20px;
  color:black
}
#switch_lianpu{
  font-size: 20px;
}
.el-switch__label {
  color: black !important
}
.demo-image{

    /* width: 900px; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .imageblock{
    width: 200px;
    height: 160px;
  }
</style>
